import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Progress } from '../ui/progress';
import { Badge } from '../ui/badge';
import { 
  BookOpen, 
  GraduationCap, 
  Calendar, 
  Clock,
  TrendingUp,
  Award,
  AlertCircle
} from 'lucide-react';

export function StudentDashboard() {
  return (
    <div className="space-y-6">
      {/* Welcome Section */}
      <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-lg">
        <h1 className="text-2xl font-medium mb-2">欢迎回来！</h1>
        <p>今天是新的一天，继续你的学习之旅吧！</p>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">本学期课程</p>
                <p className="text-2xl font-medium">8</p>
              </div>
              <BookOpen className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">平均绩点</p>
                <p className="text-2xl font-medium">3.85</p>
              </div>
              <GraduationCap className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">出勤率</p>
                <p className="text-2xl font-medium">96%</p>
              </div>
              <Calendar className="h-8 w-8 text-orange-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">获得学分</p>
                <p className="text-2xl font-medium">45</p>
              </div>
              <Award className="h-8 w-8 text-purple-500" />
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Today's Schedule */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Clock className="mr-2 h-5 w-5" />
              今日课程表
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                <div>
                  <p className="font-medium">高等数学</p>
                  <p className="text-sm text-muted-foreground">08:00 - 09:40 · 教学楼A-101</p>
                </div>
                <Badge>进行中</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <p className="font-medium">计算机程序设计</p>
                  <p className="text-sm text-muted-foreground">10:00 - 11:40 · 实验楼B-201</p>
                </div>
                <Badge variant="outline">即将开始</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <p className="font-medium">英语听说</p>
                  <p className="text-sm text-muted-foreground">14:00 - 15:40 · 语音教室C-301</p>
                </div>
                <Badge variant="secondary">下午</Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Recent Grades */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <TrendingUp className="mr-2 h-5 w-5" />
              最新成绩
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">数据结构</p>
                  <p className="text-sm text-muted-foreground">期中考试</p>
                </div>
                <div className="text-right">
                  <p className="font-medium text-green-600">92分</p>
                  <p className="text-sm text-muted-foreground">A-</p>
                </div>
              </div>
              
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">大学物理</p>
                  <p className="text-sm text-muted-foreground">实验报告</p>
                </div>
                <div className="text-right">
                  <p className="font-medium text-green-600">88分</p>
                  <p className="text-sm text-muted-foreground">B+</p>
                </div>
              </div>
              
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">线性代数</p>
                  <p className="text-sm text-muted-foreground">平时成绩</p>
                </div>
                <div className="text-right">
                  <p className="font-medium text-blue-600">85分</p>
                  <p className="text-sm text-muted-foreground">B</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Learning Progress */}
      <Card>
        <CardHeader>
          <CardTitle>学期学习进度</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm">高等数学</span>
                <span className="text-sm text-muted-foreground">85%</span>
              </div>
              <Progress value={85} className="h-2" />
            </div>
            
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm">计算机程序设计</span>
                <span className="text-sm text-muted-foreground">72%</span>
              </div>
              <Progress value={72} className="h-2" />
            </div>
            
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm">大学英语</span>
                <span className="text-sm text-muted-foreground">90%</span>
              </div>
              <Progress value={90} className="h-2" />
            </div>
            
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm">大学物理</span>
                <span className="text-sm text-muted-foreground">78%</span>
              </div>
              <Progress value={78} className="h-2" />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Important Notices */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <AlertCircle className="mr-2 h-5 w-5" />
            重要通知
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
              <p className="font-medium text-yellow-800">选课提醒</p>
              <p className="text-sm text-yellow-700">下学期选课将于12月15日开始，请提前了解课程安排。</p>
            </div>
            
            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <p className="font-medium text-blue-800">期末考试安排</p>
              <p className="text-sm text-blue-700">期末考试时间表已发布，请及时查看考试安排。</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}